/*页面布局*/
@media screen and (min-aspect-ratio: 3/1) {
    /*非常宽*/
    :root {
        --pgwidth: calc((80vw - 65vh) / 3);
    }

    .page {
        width: var(--pgwidth);
        height: 80vh;
        position: absolute;
        top: 6vh;
        font-size: calc(0.3vh);
    }

    #history {
        left: calc(0 * (var(--pgwidth) + 10rem) + 10vw - 25rem);
    }

    #favorite {
        left: calc(1 * (var(--pgwidth) + 10rem) + 10vw - 25rem);
    }

    #bookmark {
        left: calc(2 * (var(--pgwidth) + 10rem) + 10vw - 25rem);
    }

    #calendar,
    #clock {
        width: 65vh;
        position: absolute;
        left: calc(90vw - 65vh + 5rem);
        font-size: 0.3vh;
    }

    #calendar {
        height: calc(40vh - 5rem);
        top: 6vh;
    }

    #clock {
        height: calc(40vh - 5rem);
        top: calc(46vh + 5rem);
    }
}
@media screen and (min-aspect-ratio: 8/7) and (max-aspect-ratio: 3/1) {
    /*宽*/
    :root {
        --pgwidth: calc((80vw - 27vh) / 3);
    }

    .page {
        width: var(--pgwidth);
        height: 80vh;
        position: absolute;
        top: 6vh;
        font-size: calc(0.1vw + 0.02vh);
    }

    #history {
        left: calc(0 * (var(--pgwidth) + 10rem) + 10vw - 25rem);
    }

    #favorite {
        left: calc(1 * (var(--pgwidth) + 10rem) + 10vw - 25rem);
    }

    #bookmark {
        left: calc(2 * (var(--pgwidth) + 10rem) + 10vw - 25rem);
    }

    #calendar,
    #clock {
        width: 27vh;
        position: absolute;
        left: calc(90vw - 27vh + 5rem);
        font-size: 0.2vh;
    }

    #calendar {
        height: calc(36vh - 4.5rem);
        top: 6vh;
    }

    #clock {
        height: calc(44vh - 5.5rem);
        top: calc(42vh + 5.5rem);
    }
}
@media screen and (min-aspect-ratio: 3/5) and (max-aspect-ratio: 8/7) {
    /*高*/
    .page {
        width: 26.67vw;
        height: calc(80vh - 25vw);
        position: absolute;
        top: calc(6vh + 25vw + 10rem);
        font-size: calc(0.03vw + 0.12vh);
    }

    #history {
        left: calc(0 * (26.67vw + 10rem) + 10vw - 20rem);
    }

    #favorite {
        left: calc(1 * (26.67vw + 10rem) + 10vw - 20rem);
    }

    #bookmark {
        left: calc(2 * (26.67vw + 10rem) + 10vw - 20rem);
    }

    #calendar,
    #clock {
        height: 25vw;
        position: absolute;
        top: 6vh;
        font-size: 0.18vw;
    }

    #calendar {
        width: calc(38vw + 5rem);
        left: calc(10vw - 20rem);
    }

    #clock {
        width: calc(42vw + 5rem);
        left: calc(48vw - 5rem);
    }
}
@media screen and (max-aspect-ratio: 3/5) {
    /*非常高*/
    .page {
        width: 80vw;
        height: calc((93vh - 55vw - 10rem) / 3 - 10rem);
        position: absolute;
        left: calc(10vw - 10rem);
        font-size: calc(0.12vw + 0.02vh);
    }

    #history {
        top: calc(0 * (31vh - 18.33vw - 3.33rem) + 55vw + 2vh + 10rem);
    }

    #favorite {
        top: calc(1 * (31vh - 18.33vw - 3.33rem) + 55vw + 2vh + 10rem);
    }

    #bookmark {
        top: calc(2 * (31vh - 18.33vw - 3.33rem) + 55vw + 2vh + 10rem);
    }

    #calendar,
    #clock {
        height: 55vw;
        position: absolute;
        top: 2vh;
    }

    #calendar {
        width: calc(42vw - 5rem);
        left: calc(10vw - 10rem);
        font-size: 0.32vw;
    }

    #clock {
        width: calc(38vw - 5rem);
        left: calc(52vw - 5rem);
        font-size: 0.27vw;
    }
}